<template>
    <div class="panel">
        <panel-title :title="$route.meta.title"></panel-title>
        <div class="panel-body"
             v-loading="load_data"
             element-loading-text="拼命加载中">
            <el-row>
                <el-col :span="8">
                    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
                        <el-form-item label="频道名称:" prop="channelName">
                            <el-input v-model="form.channelName" placeholder="频道名称(长度限制为100)" :maxlength="100"
                                      :readonly="isReadOnly"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="频道图片:" prop="coverPath">
                            <el-upload :disabled="isReadOnly"
                                       class="upload-demo"
                                       accept="image/jpeg,image/gif,image/png"
                                       ref="upload"
                                       multiple="false"
                                       :action="server_base_url+'fileupload/'"
                                       :before-upload="onBeforeUpload"
                                       :show-file-list="false"
                                       :on-success="coverUpload"
                                       :multiple="false">
                                <img v-if="form.coverPath" :src="form.coverPath" class="avatar" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="直播名称:" prop="activityName">
                            <el-input v-model="form.activityName" placeholder="直播名称(长度限制为200)" :maxlength="200"
                                      :readonly="isReadOnly"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="直播封面:" prop="brandLogoPath">
                            <el-upload :disabled="isReadOnly"
                                       class="upload-demo"
                                       accept="image/jpeg,image/png"
                                       ref="upload"
                                       multiple="false"
                                       :action="server_base_url+'fileupload/'"
                                       :before-upload="onBeforeUpload"
                                       :show-file-list="false"
                                       :on-success="brandLogoUpload"
                                       :multiple="false">
                                <img v-if="form.brandLogoPath" :src="form.brandLogoPath" class="avatar" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="APP直播活动地址:" prop="activityLinkurl">
                            <el-input v-model="form.activityLinkurl" placeholder="APP直播活动地址(长度限制为255)" :maxlength="255"
                                      :readonly="isReadOnly"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="直播开始时间:" prop="liveStartdate">
                            <el-date-picker :readonly="isReadOnly"
                                            v-model="form.liveStartdate"
                                            type="datetime"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            :editable="false"
                                            @change="on_change_birthday"
                                            placeholder="选择直播开始时间"
                                            style="width: 250px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="直播结束时间:" prop="liveEnddate">
                            <el-date-picker :readonly="isReadOnly"
                                            v-model="form.liveEnddate"
                                            type="datetime"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            :editable="false"
                                            @change="on_change_birthday"
                                            placeholder="选择直播结束时间"
                                            style="width: 250px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="主播1名称:" prop="model1Name">
                            <el-input v-model="form.model1Name" placeholder="主播1名称(长度限制为5)" :maxlength="5"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="主播1身高:" prop="model1Height">
                            <el-input v-model="form.model1Height" placeholder="主播1身高(长度限制为5)" :maxlength="5"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="主播1体重:" prop="model1Weight">
                            <el-input v-model="form.model1Weight" placeholder="主播1体重(长度限制为5)" :maxlength="5"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="主播2名称:" prop="model2Name">
                            <el-input v-model="form.model2Name" placeholder="主播2名称(长度限制为5)" :maxlength="5"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="主播2身高:" prop="model2Height">
                            <el-input v-model="form.model2Height" placeholder="主播2身高(长度限制为5)" :maxlength="5"
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="主播2体重:" prop="model2Weight">
                            <el-input v-model="form.model2Weight" placeholder="主播2体重(长度限制为5)" :maxlength=5
                                      style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item label="直播公告:" prop="remark">
                            <el-input v-model="form.remark" placeholder="直播公告(长度限制为255)" :maxlength="255"
                                      type="textarea" style="width: 600px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="on_submit_form" :loading="on_submit_loading">保存
                            </el-button>
                            <el-button @click="$router.back()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script type="text/javascript">
    import {panelTitle} from 'components'
    import {server_base_url} from 'common/config'

    export default {
        data() {
            return {
                server_base_url,
                form: {
                    coverPath: '',
                    brandLogoPath: '',
                    liveStatus: '0'
                },
                isReadOnly: false,
                route_id: this.$route.params.liveGuid,
                load_data: false,
                on_submit_loading: false,
                rules: {
                    channelName: [{required: true, message: '频道名称不能为空', trigger: 'blur'}],
                    activityName: [{required: true, message: '直播名称不能为空', trigger: 'blur'}],
                    activityLinkurl: [{required: true, message: 'APP直播活动地址不能为空', trigger: 'blur'}],
                    liveStartdate: [{required: true, message: '直播开始时间不能为空', trigger: 'blur', type: 'date'}],
                    liveEnddate: [{required: true, message: '直播结束时间不能为空', trigger: 'blur', type: 'date'}],
                    coverPath: [{required: true, message: '请上传频道图片', trigger: 'blur'}],
                    brandLogoPath: [{required: true, message: '请上传直播封面图片', trigger: 'blur'}],
                }
            }
        },
        created() {
            this.route_id && this.get_form_data()
        },
        methods: {
            //获取数据
            get_form_data() {
                this.load_data = true
                this.$fetch.api_channel.get(this.route_id)
                    .then(({data}) => {
                        this.form = data
                        if (data.liveStatus !== 0) {
                            this.isReadOnly = true
                        }
                        this.load_data = false
                    })
                    .catch(() => {
                        this.load_data = false
                    })
            },
            //时间选择改变时
            on_change_birthday(val) {
                this.$set(this.form, 'birthday', val)
            },
            onBeforeUpload(file) {
                if (this.isReadOnly) {
                    this.$message.error('只允许直播未开始时上传图片')
                    return false
                }
                const isIMAGE = file.type === 'image/jpeg' || 'image/png';
                const isLt1M = file.size / 1024 / 1024 < 1;

                if (!isIMAGE) {
                    this.$message.error('上传文件只能是图片格式!');
                }
                if (!isLt1M) {
                    this.$message.error('上传文件大小不能超过 1MB!');
                }
                return isIMAGE && isLt1M;
            },
            coverUpload(res, file) {
                if (res.status == 0) {
                    this.form.coverPath = res.data;
                } else {
                    this.$message.error('上传图片失败！');
                }
            }, brandLogoUpload(res, file) {
                if (res.status == 0) {
                    this.form.brandLogoPath = res.data;
                } else {
                    this.$message.error('上传图片失败！');
                }
            },
            trim(str) {
                return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');
            },
            //提交
            on_submit_form() {
                this.$refs.form.validate((valid) => {
                    if (!valid) return false
                    this.on_submit_loading = true
                    this.form.activityLinkurl=this.trim(this.form.activityLinkurl)
                    if (typeof (this.route_id) !== "undefined") {
                        this.$fetch.api_channel.update(this.route_id, this.form)
                            .then(({msg}) => {
                                this.$message.success(msg)
                                setTimeout(this.$router.back(), 500)
                            })
                            .catch(() => {
                                this.on_submit_loading = false
                            })
                    } else {
                        this.$fetch.api_channel.add(this.form)
                            .then(({msg}) => {
                                this.$message.success(msg)
                                setTimeout(this.$router.back(), 500)
                            })
                            .catch(() => {
                                this.on_submit_loading = false
                            })
                    }
                })
            }
        },
        components: {
            panelTitle
        }
    }
</script>
